import { Story, Canvas } from '@storybook/addon-docs';

# Selectable Rows

Adding Selectable Rows functionality is easy. Let's make our rows selectable and also access selected results `onSelectedRowsChange`:

```js
function MyComponent() {
  const handleChange = ({ selectedRows }) => {
    // You can set state or dispatch with something like Redux so we can use the retrieved data
    console.log('Selected Rows: ', selectedRows);
  };

  return (
    <DataTable
      columns={columns}
      data={data}
      selectableRows
      onSelectedRowsChange={handleChange}
    />
  );
};
```

<Canvas>
  <Story id="selectable-basic--basic" />
</Canvas>

## Accessibility

You can tab through checkboxes and use the space bar to expand.
